<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common2 :: common_head(~{::title},~{},~{})">
    <title>建设用地</title>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function () {
        var model = Ext.create("Ext.data.Model", {
            fields: [
                {
                    type:'string',
                    name:'modifiedTime'
                },
                {
                    type: 'string',
                    name: 'mappingId'
                }, {
                    type: 'string',
                    name: 'analyseTypeOri'
                }, {
                    type: 'string',
                    name: 'analyseTypeMapped'
                }, {
                    type: 'string',
                    name: 'remark'
                }
            ]
        });



        var store = Ext.create('Ext.data.Store',{
            model: model,
            autoLoad: true,
            start: 0,
            limit: 20,
            pageSize: 20,
            proxy:{
                type: 'ajax',
                api:{
                    read: GS.global.ctxPath + '/analyseMapped/getAnalyseMapped'
                },
                actionMethods : {
                    read : 'POST' // Store设置请求的方法，与Ajax请求有区别
                },
                /**设置读取方式*/
                reader:{
                    type: 'json',
                    rootProperty: 'data.records',
                    totalProperty: 'data.total'
                }
            }
        });

        /**分页*/
        var pageCombo = Ext.create('Ext.form.ComboBox', {
            name: 'pagesize',
            hiddenName: 'pagesize',
            store: new Ext.data.ArrayStore({
                fields: ['text', 'value'],
                data: [
                    ['20', 20], ['50', 50]
                ]
            }),
            valueField: 'value',
            displayField: 'text',
            emptyText: 20,
            width: 50
        });

        //添加下拉显示条数菜单选中事件
        pageCombo.on("change", function (comboBox) {
            var pagingToolbar = Ext.getCmp('pagingbar');
            pagingToolbar.pageSize = parseInt(comboBox.getValue());
            var itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage
            store.pageSize = itemsPerPage;
            store.loadPage(1);
        });

        var grid = Ext.create('Ext.grid.Panel', {
            title: '配置分析映射页面',
            tbar: [
                {
                    text: '新增',
                    handler: function () {
                        doAnalyseProfile('add');
                    }
                },
                {
                    text: '编辑',
                    handler: function () {
                        doAnalyseProfile('update');
                    }
                },
                {
                    text: '删除',
                    handler: function () {
                        deleteRecord();
                    }
                },'->',
                {
                    xtype : 'textfield',
                    id:'query_mapped_name',
                    name:'query_mapped_name',
                    emptyText: '请输入映射名称...',
                },{
                    xtype : 'button',
                    id : 'btnStuListQuery',
                    text : '查询',
                    handler: function () {
                        var paramValue = Ext.getCmp('query_mapped_name').value;
                        store.getProxy().setExtraParam('query_mapped_name',paramValue);
                        grid.store.reload();
                    }

                }, {
                    xtype: 'button',
                    id: 'btnStuListReset',
                    text: '重置',
                    handler: function () {
                        Ext.getCmp('query_mapped_name').reset();
                        store.getProxy().setExtraParam('query_mapped_name', null);
                        grid.store.reload();
                    }
                }
            ],
            dockedItems: [{
                id: 'pagingbar',
                xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true,
                autoScroll: true,
                beforePageText: "第",// update
                afterPageText: "页  共 {0} 页",// update
                firstText: "第一页",
                prevText: "上一页",// update
                nextText: "下一页",
                lastText: "最后页",
                refreshText: "刷新",
                displayMsg: "显示 {0} - {1}条，共 {2} 条",// update
                emptyMsg: '没有数据',
                items: ['-', '每页显示', pageCombo, '条']//此处是将创建的combobox添加到工具栏中
            }],
            store: store,
            columns: [
                {
                    xtype: 'rownumberer',
                    header: '行号',
                    renderer: function (value, metadata, record, rowIndex) {
                        return (rowIndex + 1);
                    },
                    width: 60,
                    align: 'center'
                },
                {
                    text: '原始分析类型',
                    width: 300,
                    dataIndex: 'analyseTypeOri'
                },
                {
                    text: '映射后分析类型',
                    width: 380,
                    dataIndex: 'analyseTypeMapped'
                },
                {
                    text: '备注',
                    flex: 10,
                    dataIndex: 'remark'
                }
            ]
        });

        new Ext.Viewport({
            layout: 'fit',
            items: [grid]
        });


        var form = Ext.create('Ext.form.Panel', {
            border: false,
            layout: {type: 'auto', align: 'right'},
            buttonAlign: 'center',
            defaultType: 'textfield',
            bodyStyle: {
                padding: '20px'
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [{
                        xtype: 'textfield',
                        name: 'action',
                        hidden: true,
                        hideLabel: true
                    }, {
                        xtype: 'textfield',
                        name: 'mappingId',
                        hidden: true,
                        hideLabel: true
                    },{
                        xtype: 'textfield',
                        name: 'modifiedTime',
                        hidden: true,
                        hideLabel: true
                    }
                    ]
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '原始分析类型',
                            name: 'analyseTypeOri',
                            flex: 10,
                            allowBlank: false,
                            margin: '5 5 5 5'
                        }
                    ]
                }, {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '映射后分析类型',
                            name: 'analyseTypeMapped',
                            flex: 10,
                            allowBlank: false,
                            margin: '5 5 5 5'
                        }
                    ]
                }, {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textareafield',
                            fieldLabel: '备注',
                            name: 'remark',
                            flex: 10,
                            allowBlank: false,
                            margin: '5 5 5 5',
                            height: "190px",
                            maxLength:50
                        }]
                }
            ]
        });

        var profileWindow = Ext.create('Ext.Window', {
            title: '分析版本配置',
            width: 500,
            height: 400,
            resizable: false,
            modal: true,
            items: [form],
            maximizable: true,
            minimizable: true,
            closeAction: 'hide',//设置点击关闭按钮为隐藏,不设置，window不能重复利用
            buttons: [{
                xtype: 'button', text: '确定', handler: function () {
                    saveAnalyseVersion();
                }
            }, {
                xtype: 'button', text: '取消', handler: function () {
                    profileWindow.hide();
                }
            }]
        });

        /***
         * 打开分配配置页面
         */
        function doAnalyseProfile(action) {
            /**清空表单数据**/
            form.getForm().reset();
            /**设置表单action的值*/
            form.getForm().findField('action').setValue(action);
            var title = "";
            if (action == 'add') {
                title = '新增分析映射配置';
            } else if (action == 'update') {
                title = '修改分析映射配置';
                /**加载选中数据*/
                var record = getSelectionRecord();
                /**加载数据*/
                form.getForm().loadRecord(record);

            } else if (action == 'check') {
                title = '查看分析映射配置';
            }
            /**设置标题**/
            profileWindow.setTitle(title);
            profileWindow.show();
        }

        /***
         * 删除分析映射信息
         */
        function deleteRecord() {
            var record = getSelectionRecord();
            if (!record) {
                Ext.MessageBox.alert('提示', '只能选中一条数据进行处理!');
                return;
            }
            Ext.Msg.show({
                title: '提示',
                message: '是否确认删除？',
                buttons: Ext.Msg.YESNO,
                icon: Ext.Msg.QUESTION,
                fn: function (btn) {
                    if (btn === 'yes') {
                        Ext.Ajax.request({
                            method: 'POST',
                            url: GS.global.ctxPath + '/analyseMapped/deleteAnalyseMapped',
                            params: {
                                'mappingId': record.get("mappingId")
                            },
                            success: function (response, config) {
                                Ext.Msg.alert('提示', '删除成功!');
                                grid.store.reload();//重新加载数据
                            },
                            failure: function () {
                                Ext.Msg.alert('提示', '删除失败!');
                            }
                        });
                    }

                }
            })


        }

        /***
         * 获取选中的数据,至提供单选模式
         */
        function getSelectionRecord() {
            var records = grid.selModel.getSelection();
            if (records.length != 1) {
                Ext.MessageBox.alert('提示', '只能选中一条数据进行处理!');
            }
            return records[0];
        }

        /**
         * 保存分析映射配置信息
         */
        function saveAnalyseVersion() {
            var form_ = form.getForm();
            var action = form_.findField('action').getValue();
            form.getForm().findField('modifiedTime').setValue(new Date());
            if(form_.isValid()){
                var url =  GS.global.ctxPath + "/analyseMapped/insertAnalyseMapped";
                var msg = '添加成功!';
                if(action == 'update'){
                    url =  GS.global.ctxPath + "/analyseMapped/updateAnalyseMapped";
                    msg = '更新成功!';
                }
                form_.submit({
                    method: 'POST',
                    url:url,
                    waitMsg: '请稍等,正在执行',
                    params: form_.getValues(),
                    success: function (form, action) {
                        /*关闭窗口**/
                        profileWindow.hide();
                        grid.store.reload();
                        Ext.MessageBox.alert('提示',msg);
                    },
                    failure: function (form, action) {
                        Ext.MessageBox.alert('提示', "操作失败");
                    }

                })
            }
        }

    });

</script>
</body>
</html>